<template>
  <view class="point-page">
    <view class="page-header">
      <text class="page-title">积分明细</text>
    </view>

    <scroll-view class="list-container" scroll-y>
      <view v-if="gifts.length === 0" class="empty-tip">
        <text>暂无积分明细记录</text>
      </view>

      <view v-for="(gift, index) in gifts" :key="gift.id" class="gift-item">
        <image :src="gift.imageUrl" class="gift-image" mode="aspectFill"></image>
        <view class="gift-info">
          <text class="gift-name">{{ gift.giftName }}</text>
          <view class="gift-details">
            <text class="gift-point">-{{ gift.point }}积分</text>
            <text class="gift-time">{{ formatTime(gift.createTime) }}</text>
          </view>
          <text class="gift-status">{{ getStatusText(gift.status) }}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getStudentGiftsApi } from '../../http/my'

const studentName = ref('')
const gifts = ref([])

onLoad((options) => {
  if (options.studentName) {
    studentName.value = decodeURIComponent(options.studentName)
    fetchGiftsData()
  } else {
    uni.showToast({
      title: '缺少用户信息',
      icon: 'none'
    })
    setTimeout(() => uni.navigateBack(), 1500)
  }
})

const formatTime = (timeStr) => {
  // 将ISO时间格式转换为本地时间字符串
  const date = new Date(timeStr)
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
}

const getStatusText = (status) => {
  const statusMap = {
    1: '已发货',
    2: '已取消',
    3: '待发货'
  }
  return statusMap[status] || '未知状态'
}

const fetchGiftsData = async () => {
  try {
    const res = await getStudentGiftsApi(studentName.value, 1000, 1)
    
    if (res && res.records) {
      gifts.value = res.records
    } else {
      console.error('获取积分明细失败:', res)
      gifts.value = []
      uni.showToast({
        title: '获取积分明细失败',
        icon: 'none'
      })
    }
  } catch (error) {
    console.error('请求积分明细接口出错:', error)
    uni.showToast({
      title: '请求积分明细失败',
      icon: 'none'
    })
    gifts.value = []
  }
}
</script>

<style scoped>
.point-page {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  padding: 30rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
}

.list-container {
  margin-top: 10px;
}

.gift-item {
  display: flex;
  padding: 20rpx;
  margin-bottom: 20rpx;
  background-color: #fff;
  border-radius: 15rpx;
  box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.05);
}

.gift-image {
  width: 150rpx;
  height: 150rpx;
  border-radius: 10rpx;
  margin-right: 20rpx;
}

.gift-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.gift-name {
  font-size: 30rpx;
  margin-bottom: 10rpx;
  font-weight: bold;
}

.gift-details {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.gift-point {
  font-size: 28rpx;
  color: #f5222d;
}

.gift-time {
  font-size: 24rpx;
  color: #999;
}

.gift-status {
  font-size: 24rpx;
  color: #1890ff;
  align-self: flex-end;
}

.empty-tip {
  text-align: center;
  padding: 40rpx 0;
  color: #999;
  font-size: 28rpx;
  background-color: #f9f9f9;
  border-radius: 10rpx;
}
</style>